<template name="mytime2">
	
		<view class="discountsBottom">
			<text>{{djsText}}</text>
		</view>		
		
</template>

<script>
export default {
	name: 'mytime', //组件名称
	// 传递参数
	props: {
		item:{
			type: Object,
			default: null
		}
	},
	data() {
		return {			
			djsText: '',
			_hour:'',
			_min:'',
			_sec:''
		};
	},
	methods: {
		daojishi() {
			setInterval(()=>{
			//倒计时
			let _end = new Date(Date.parse(this.item.createTime.replace(/-/g, '/')));//发起助力的时间
			let _endact = new Date(Date.parse(this.item.actEndTime.replace(/-/g, '/'))); //活动结束时间
			var oldtime = new Date(_end);	
			var _now = new Date();//当前时间
			var _rightTime = _endact.getTime() - _now.getTime(); 
			var _leftTime = ''
			if(_rightTime > 24*60*60*1000){
				
				 _leftTime = oldtime.getTime() + 24*60*60*1000 - _now.getTime();
			}else{
				
				_leftTime = _rightTime
			}
			let _hour = Math.floor(_leftTime / (1000 * 60 * 60));
			let _min = Math.floor((_leftTime / (1000 * 60)) % 60);
			let _sec = Math.floor((_leftTime / 1000) % 60);
			this._hour = _hour > 9 ? _hour : '0' + _hour;
			this._min = _min > 9 ? _min : '0' + _min;
			this._sec = _sec > 9 ? _sec : '0' + _sec;
			this.djsText = _hour + ':' + _min + ':' + _sec;
			if(_leftTime < 0 ) {
				this.djsText = '00:00:00'
					
			}
			},1000)
		}
	},
	created() {
		setTimeout(()=>{
			this.daojishi();
		},500)
	}
};
</script>

<style lang="less">
	body{
		background-color: #eceded;
		padding: 20rpx;
		
	}
	.myHelpList{
		width: 95%;
	}
	.helpShopping{
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 10rpx 15rpx;
		display: flex;
		overflow: hidden;
		
		.tupian{
			width: 200rpx;
			height: 100%;
			position: relative;
			// 助力中
			.zhong{
				position: absolute;
				z-index: 2;
				display: block;
				top: 0;
				left: 0;
				background-color: #f38700;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				
				color: #ffffff;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			// 已成功
			.gong {
				position: absolute;
				z-index: 2;
				display: block;
				top: 0;
				left: 0;
				background-color: #fee10a;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				
				color: #ff6a6a;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			// 已失败
			.shi {
				position: absolute;
				z-index: 2;
				display: block;
				top: 0;
				left: 0;
				background-color: #9c9c9c;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				
				color: #fff;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			// 待购买
			.gou {
				position: absolute;
				z-index: 2;
				display: block;
				top: 0;
				left: 0;
				background-color: #ffbbbb;
				padding: 0 10rpx 0 10rpx;
				font-size: 26rpx;
				
				color: #fff;
				border-top-right-radius: 25upx;
				border-bottom-right-radius: 25upx;
			}
			image{
				width: 100%;
				height: 100%;
			}
			
		}
		.shoppingName{
			flex:2;
			height: 100%;				
			padding-left: 15rpx;
			display: flex;
			flex-direction: column;
			.className{
				font-weight: 700;
				font-size: 30rpx
			}
			
			.jigou{
				color: #bebebe;
				font-size: 24rpx
			}
			.jiagejindu{
				width: 100%;
				height: 110rpx;
				margin-top: 20rpx;
				
				.topdiscounts{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.discountsleft{
						 text{
							 font-size: 26rpx;
							 color: red;
						 }
					}
					.discountsright{
						width: 60rpx;
						height: 26rpx;
						background-image: url(../../static/mybtnhuang.png);
						background-size: 100% 100%;
						text-align: center;
						line-height: 26rpx;
						.discountsright1 {
							color: red;
							font-size: 18rpx;
							
						}
					}
					
				}
				.discountsMiddlePart{
					width: 100%;
					height: 15rpx;
					background-image: url(../../static/jindutiao.png);
					background-size: 100% 100%;
					.topline {
						height: 100%;
						background-color: #fcd100;
						border-radius: 30rpx;
					}
					
				}
				.discountsBottom{
					text{
						color: #969896;
						font-size: 20rpx;
					}
				}
				
				
			}
		}
		.shoppingName1{
					flex:2;
					height: 100%;				
					padding-left: 15rpx;
					display: flex;
					flex-direction: column;
					.className{
						font-weight: 700;
						font-size: 30rpx;
						color: #c4c4c4;
					}
					
					.jigou{
						color: #c4c4c4;
						font-size: 24rpx
					}
					.jiagejindu{
						width: 100%;
						height: 110rpx;
						margin-top: 20rpx;
						
						.topdiscounts{
							display: flex;
							justify-content: space-between;
							align-items: center;
							.discountsleft{
								 text{
									 font-size: 26rpx;
									 color: #c4c4c4;
								 }
							}
							.discountsright{
								width: 60rpx;
								height: 26rpx;
								background-image: url(../../static/mybtnhui.png);
								background-size: 100% 100%;
								text-align: center;
								line-height: 26rpx;
								.discountsright1 {
									color: #fff;
									font-size: 18rpx;
									
								}
							}
							
						}
						.discountsMiddlePart{
							width: 100%;
							height: 15rpx;
							background-image: url(../../static/jindutiao.png);
							background-size: 100% 100%;
							.topline {
								height: 100%;
								background-color: #c4c4c4;
								border-radius: 30rpx;
							}
						}
						.discountsBottom{
							text{
								color: #c4c4c4;
								font-size: 20rpx;
							}
						}
						
						
					}
				}
		.helpBtn{
			flex: 1;
			height: 100%;
			padding: 25rpx 0;
			display: flex;
			margin-left: 45rpx;
			flex-direction: column;
			justify-content: space-between;
			.jvli{
				text-align: right;
				color: #bebebe;
				font-size: 24rpx;
				padding-right:24rpx;
				
			}
			.btn{
				width: 100%;
				height: 42rpx;
				background-image: url(../../static/helpBtn2.png);
				background-size: 100% 100%;
				text-align: center;
				color: #fff;
				font-size: 22rpx;
				font-weight: 700;
				line-height: 42rpx;
			}
			.btn1{
				width: 100%;
				height: 42rpx;
				background-image: url(../../static/huisebtn.png);
				background-size: 100% 100%;
				text-align: center;
				color: #fff;
				font-size: 22rpx;
				font-weight: 700;
				line-height: 42rpx;
			}
		}
	}

</style>
